<template>
  <view class="container">
    <view class="back"></view>
    <kt-nav-bar
        :icon="$kt.file.byPath('tabbar/home-selected.svg')"
        :title="$i18n.zhToGlobal('首页')"></kt-nav-bar>
    <view style="height: 50rpx"></view>
    <view style="">
      <!-- 轮播图 -->
      <u-swiper
          :indicator="true"
          height="400rpx"
          previousMargin="30"
          nextMargin="30"
          circular
          :autoplay="true"
          radius="20rpx"
          bgColor="#ffffff"
          :list="list"></u-swiper>

    </view>

    <view class="box">
      <view class="title">{{ $i18n.zhToGlobal('产品分类') }}</view>
      <!-- 产品分类 -->
      <view
          class="grid">
        <view
            class="grid-item"
            v-for="(item, index) in shop.getAllHasChildren()"
            @click="$kt.router.navTo('/pages/goodsSearch/goodsSearch?goodsTypeId='+item.id)"
            :key="index"
            v-if="item.isShowInMobileIndex"
        >
          <view>

            <image
                v-if="item.fileIdOfIcon"
                mode="aspectFill"
                class="grid-icon"
                :src="$kt.file.visit(shop.getI18nByGoodsTypeId(item.id).fileIdOfIcon)"></image>
            <image
                v-else
                mode="aspectFill"
                class="grid-icon"
                :src="$kt.file.byPath('image/defaultGoodTypeIcon.svg')"></image>
          </view>
          <!--          <view class="grid-text">{{shop.getI18nByGoodsTypeId(item.id).name}}</view>-->
          <view class="grid-text">
            {{ shop.getI18nByGoodsTypeId(item.id).name }}
            <!--            <kt-one-line-text-->
            <!--                font-size="28rpx"-->
            <!--            :text="shop.getI18nByGoodsTypeId(item.id).name"-->
            <!--            ></kt-one-line-text>-->
          </view>
          <view style="height: 10rpx"></view>
        </view>
      </view>
    </view>

    <view
        v-if="recommendGoodsList&&recommendGoodsList.length>0"
        class="box">
      <view class="title">{{ $i18n.zhToGlobal('品质推荐') }}
        <view
            @click="$kt.router.navTo('/pages/goodsSearch/goodsSearch')"
            class="to-more">
          <text class="more-text">➠{{ $i18n.zhToGlobal('筛选') }}</text>

        </view>
      </view>
      <view>

        <view class="goods-card-box">
          <view v-for="(item, index) in recommendGoodsList" v-if="index%2===0">

            <goods-card
                :item="item"
            ></goods-card>

          </view>

        </view>
        <view class="goods-card-box">
          <view v-for="(item, index) in recommendGoodsList" v-if="index%2!==0">

            <goods-card
                :item="item"
            ></goods-card>

          </view>

        </view>

      </view>
    </view>
    <view style="height: 180rpx"></view>

  </view>
</template>

<script>
import shop from "@/js/shop";

export default {
  data() {
    return {
      shop,
      list: [],
      recommendGoodsList: []
    }
  },
  created() {
    this.getCarouselImage();
    this.getRecommendGoodsList();
  },
  methods: {
    getRecommendGoodsList() {
      this.$kt.request.send({
        uri: '/business-shop-web/shopGoods/getRecommendGoods',
        stateSuccess: (res) => {
          shop.handleList(res.data).then((res)=>{
            this.recommendGoodsList = res;
          });

        }
      });
    },
    toGoodsDetail(item) {
      uni.navigateTo({
        url: '/pages/goodsDetail/goodsDetail?goodsId=' + item.id
      })
    },
    // 获取对应的轮播图
    // /business-common-web/carouselImageI18n/getAll
    getCarouselImage() {
      // 如果有缓存，先从缓存中取
      if (this.$kt.storage.get('carouselImage')) {
        this.list = this.$kt.storage.get('carouselImage');
      }
      this.$kt.request.send({
        uri: '/business-common-web/carouselImageI18n/getAll',
        stateSuccess: (res) => {
          this.list = res.data.map(item => {
            return this.$kt.file.visit(item.fileIdOfImage);
          });
          // 放入缓存中
          this.$kt.storage.set('carouselImage', this.list);
        }
      });
    }
  }

}
</script>

<style lang="scss" scoped>
.back {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #FFFFFF;
  top: 0;
  left: 0;
  z-index: -1;
}

.grid-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 20rpx;
}

.grid-text {
  text-align: center;
  font-size: 28rpx;
}

.box {
  padding: 20rpx;
  background-color: #FFFFFF;
  margin-top: 20rpx;

  .title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .to-more {
    float: right;
    font-size: 24rpx;
    color: #999999;
    font-weight: lighter;
  }

  .grid-icon {
    width: 100rpx;
    height: 100rpx;
  }

  .more-text {
    vertical-align: top;
  }

  .more-icon {
    width: 24rpx;
    height: 24rpx;
    vertical-align: top;
    margin-top: 5rpx;
  }

}

.to-more:active{
  transform: scale(.95);
}

.good-card {
  position: relative;
  background-color: #FFFFFF;
  margin-top: 20rpx;
  border: 1rpx solid #F0F0F0;
  border-radius: 20rpx;
  width: 330rpx;

  .good-image {
    width: 100%;
    border-radius: 20rpx 20rpx 0 0;
    height: 300rpx;
  }

  .good-card-text {
    font-size: 30rpx;
  }

  .good-card-text-box {
    padding: 10rpx;
    box-sizing: border-box;

    .good-card-text {
      // 超出省略号
      overflow: hidden;
      text-overflow: ellipsis;
      // 最多两行
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}

.good-card:active {
  transform: scale(.98);
}

.price {
  font-size: 32rpx;
  color: #FF0000;
  display: inline-block;
}

.grid-tips {
  font-size: 20rpx;
  color: #999999;
  margin-top: 20rpx;
  text-align: left;
}

.goods-card-box {
  display: inline-block;
  width: 50%;
  vertical-align: top;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

  .grid-item {
    width: 32%;
    text-align: center;
    margin-top: 20rpx;
  }
}

.grid-item:active{
  .grid-icon{
    transform: scale(.95);
  }
}
</style>